import React,{Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    Navigator,
    WebView,
    TextInput,
    DeviceEventEmitter,
}from 'react-native';
import NavigationBar from './js/common/NavigationBar';
const URL='http://www.imooc.com'

export default class WebViewTest extends Component{
            constructor(props) {
                     super(props);
                     this.state ={
                         url:URL,
                         title:'',
                         canGoBack:false
                     }   
            }
            go() {
                this.setState({
                    url:this.text
                })
            }
            goBack() {
                if(this.state.canGoBack){
                      this.webView.goBack();
                }else{
                    DeviceEventEmitter.emit('showToast','无路可退');
                }
            }
            onNavigationStateChange(e) {
                this.setState({
                    canGoBack:e.canGoBack,
                    title:e.title
                })
            }
            render() {
                return <View style={styles.container}>
                    <NavigationBar
                        title={'wEBVIEW的使用'}
                        style={{backgroundColor:'#6495ED'}}
                        />
                        <View style={styles.row}>
                           <Text
                               onPress={()=>{
                                   this.goBack();
                               }}
                           >返回</Text> 
                            <TextInput
                             style={styles.input}
                             defaultValue={URL}
                             onChangeText={text=>this.text=text}
                            ></TextInput>
                            <Text
                               onPress={()=>{
                                   this.go();
                               }}
                           >go</Text> 
                        </View>    
                        <WebView
                            ref={webView=>this.webView}
                            source={{uri:this.state.url}}
                            onNavigationStateChange={(e)=>this.onNavigationStateChange(e)}
                        />
                    </View>
            }
        }
const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    tips: {
        fontSize: 20,
    },
    row:{
        flexDirection:'row',
        alignItems:'center',
        margin:10,
    },
    input:{
        height:40,
        flex:1,
        borderWidth:1 ,
        margin:2,
    }
})